<template>
  <div class="aui-theme-tools" :class="{ 'aui-theme-tools--open': isOpen }">
    <div class="aui-theme-tools__toggle" @click="isOpen = !isOpen">
      <svg class="icon-svg" aria-hidden="true"><use xlink:href="#icon-setting"></use></svg>
    </div>
    <div class="aui-theme-tools__content">
      <div class="aui-theme-tools__item">
        <p class="title-p">整体风格设计</p>
        <div class="top-img-item">
          <el-tooltip class="item" effect="dark" content="鲜艳" placement="top">
            <div class="top-img-radio  img-defalut" @click="$store.state.navbarLayoutType = 'colorful'">
              <i v-if="$store.state.navbarLayoutType === 'colorful'" class="el-icon-check"></i>
            </div>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="白色" placement="top">
            <div class="top-img-radio" @click="$store.state.navbarLayoutType = 'default'">
              <i v-if="$store.state.navbarLayoutType === 'default'" class="el-icon-check"></i>
            </div>
          </el-tooltip>
        </div>
      </div>
      <div class="aui-theme-tools__item">
        <p class="title-p">导航风格</p>
        <div class="top-img-item">
          <el-tooltip class="item" effect="dark" content="黑色" placement="top">
            <div class="top-img-radio  img-dark" @click="$store.state.sidebarLayoutSkin = 'dark'">
              <i v-if="$store.state.sidebarLayoutSkin === 'dark'" class="el-icon-check"></i>
            </div>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="白色" placement="top">
            <div class="top-img-radio" @click="$store.state.sidebarLayoutSkin = 'default'">
              <i v-if="$store.state.sidebarLayoutSkin === 'default'" class="el-icon-check"></i>
            </div>
          </el-tooltip>
        </div>
      </div>
      <div class="aui-theme-tools__item">
        <p>主题色</p>
        <div class="color-list">
          <div class="color-item" v-for="item in themeList" :key="item.name" :style="{backgroundColor: item.color}" @click="themeColorChangeHandle(item.name)">
            <i v-if="themeColor === item.name" class="el-icon-check"></i>
          </div>
        </div>
      </div>
      <div class="aui-theme-tools__item">
        <p>导航模式</p>
        <div class="top-img-item">
          <el-tooltip class="item" effect="dark" content="顶部导航栏" placement="top">
            <div class="top-img-radio  img-nav-top" @click="$store.state.layoutType = 'top'">
              <i v-if="$store.state.layoutType === 'top'" class="el-icon-check"></i>
            </div>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="侧边导航栏" placement="top">
            <div class="top-img-radio img-nav-left" @click="$store.state.layoutType = 'default'">
              <i v-if="$store.state.layoutType === 'default'" class="el-icon-check"></i>
            </div>
          </el-tooltip>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      isOpen: false,
      themeList: require('@/element-ui/config.js'),
      themeColor: 'turquoise'
    }
  },
  methods: {
    themeColorChangeHandle (val) {
      this.themeColor = val
      var styleList = [
        {
          id: 'J_elementTheme',
          url: `${process.env.BASE_URL}element-theme/${val}/index.css?t=${new Date().getTime()}`
        },
        {
          id: 'J_auiTheme',
          url: `${process.env.BASE_URL}element-theme/${val}/aui.css?t=${new Date().getTime()}`
        }
      ]
      for (var i = 0; i < styleList.length; i++) {
        var el = document.querySelector(`#${styleList[i].id}`)
        if (el) {
          el.href = styleList[i].url
          continue
        }
        el = document.createElement('link')
        el.id = styleList[i].id
        el.href = styleList[i].url
        el.rel = 'stylesheet'
        document.querySelector('head').appendChild(el)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
  .aui-theme-tools{
    .top-img-item{
      display: flex;
    }
    .top-img-radio{
      background: url("../assets/img/top_01.png") no-repeat center;
      background-size: 100%;
      width: 50px;
      height: 50px;
      box-shadow: 0 0 3px rgba(0,0,0,0.2);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 20px;
      cursor: pointer;
      i{
        font-size: 35px;
        color: #0aa0bf;
      }
    }
    .img-defalut{
      background: url("../assets/img/top_02.png") no-repeat center;
      background-size: 100%;
    }
    .img-dark{
      background: url("../assets/img/top_03.png") no-repeat center;
      background-size: 100%;
    }
    .img-nav-left{
      background: url("../assets/img/top_03.png") no-repeat center;
      background-size: 100%;
    }
    .img-nav-top{
      background: url("../assets/img/top_04.png") no-repeat center;
      background-size: 100%;
    }
    .color-list{
      display: flex;
      flex-wrap: wrap;
      .color-item{
        width: 25px;
        height: 25px;
        margin: 0 5px 5px 0;
        border-radius: 3px;
        border: 1px solid #efefef;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        i{
          font-size: 20px;
          color: #ffffff;
        }
      }
    }
  }
</style>
